.bar-chart-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

@media (max-width: 760px) {
  .bar-chart-grid {
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
  }
}

.bar-chart {
  display: inline-grid;

  /* Got the idea of using <dl>, <dt>, and <dd> from:
   * https://css-tricks.com/making-charts-with-css/ */
  dt {
    grid-column: 1 / 4;
    text-align: center;
  }

  dd {
    padding: 5px;
    margin: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
  }

  dd + dd {
    border-left: 1px solid #ccc;
  }

  progress {
  /* Reset the default appearance */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

    writing-mode: vertical-lr;

    width: 2em;
    height: 5em;
    background: none;
    border: none;
    position: relative;
  }

  progress::-webkit-progress-bar {
    background: none;
  }

  progress::-webkit-progress-value {
    /* Chrome (and derivatives) are stubborn to attach the bar to the top */
    bottom: 0;
    position: absolute;
  }

  progress.git::-moz-progress-bar {
    background-color: #E09FA0;
  }
  progress.git::-webkit-progress-value {
    background-color: #E09FA0;
  }
  progress.svn::-moz-progress-bar {
    background-color: #E05F49;
  }
  progress.svn::-webkit-progress-value {
    background-color: #E05F49;
  }
}
